<template>
	<view>
		<!-- 地址 -->
		<navigator url="/mall/my/address?back=1" class="address-section">
			<view class="order-content">
				<view class="cen">
					<view class="top">
						<text class="name">{{addressData.real_name}}</text>
						<text class="mobile">{{addressData.phone}}</text>
					</view>
					<text class="address clamp2">{{addressData.province}} {{addressData.city}}{{addressData.district}}{{addressData.detail}}</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
		</navigator>
		<view class="goods-section" v-for="(items,index) in cartInfo" :key="index">
			<view class="g-header b-b">
				<image class="logo" :src="items.seller_info.online_logo"></image>
				<text class="name">{{items.seller_info.online_name}}</text>
			</view>
			<!-- 商品列表 -->
			<block v-for="(item,idx) in items.seller_info.goods_list" :key="idx">
				<view class="g-item">
					<image :src="item.productInfo.attrInfo?item.productInfo.attrInfo.image:item.productInfo.image"></image>
					{{getAllPrice(items.seller_info.goods_list)}}
					<view class="right">
						<text class="title clamp">{{item.productInfo.store_name}}</text>
						<view class="specBox">
							<!-- 兼容app -->
							<text class="spec">{{item.productInfo.attrInfo ? item.productInfo.attrInfo.suk||'' : ''}}</text>
							<text class="number">x {{item.cart_num}}</text>
						</view>

						<view class="price-box">
							<text class="price">{{item.productInfo.attrInfo?item.productInfo.attrInfo.price:item.productInfo.price}}</text>
						</view>
					</view>
				</view>
				<!-- 赠品列表 -->
				<!-- 是否赠送旅游卡或k1会员 -->
				<view class="g-item" v-if="item.productInfo.send_travel_card">
					<image src="../../../mall/static/images/select-vip.png"></image>
					<view class="right">
						<text class="title clamp">全国旅游一卡通</text>
						<view class="specBox">
							<!-- 兼容app -->
							<text class="spec"></text>
							<text class="number">x 1</text>
						</view>
						<view class="price-box">
							<text class="price">168</text>
						</view>
					</view>
				</view>
				<view class="g-item" v-if="item.productInfo.send_k1vip">
					<image src="../../../mall/static/images/select-vip.png"></image>
					<view class="right">
						<text class="title clamp">K1会员1年</text>
						<view class="specBox">
							<!-- 兼容app -->
							<text class="spec"></text>
							<text class="number">x 1</text>
						</view>
						<view class="price-box">
							<text class="price">19.9</text>
						</view>
					</view>
				</view>
				<!-- 其他礼包 -->
				<view class="g-item" v-for="(itemGif,itInd) in item.productInfo.cili_gift_bag" :key="itInd" v-if="itemGif">
					<!-- ../../../mall/static/images/select-vip.png -->
					<image :src="itemGif.image"></image>
					<view class="right">
						<text class="title clamp">{{itemGif.store_name}}</text>
						<view class="specBox">
							<text class="spec">{{gifts(itemGif)}}</text>
							<text class="number">x {{itemGif.num}}</text>
						</view>

						<view class="price-box">
							<text class="price">{{itemGif.price}}</text>
						</view>
					</view>
				</view>
				<!-- 赠品结束 -->
			</block>

			<view class="yt-list-cell desc-cell">
				<text class="cell-tit clamp">留言</text>
				<!-- @input="message($event,index)" -->
				<input class="desc" type="text" placeholder="请填写留言信息" placeholder-class="placeholder" v-model="messages" />
			</view>
		</view>
		<!-- 使用刺梨卡 -->
		<!-- v-if="trattStu !== 3" -->
		<view class="rosa" >
			<view class="title">
				<image src="../../../mall/static/images/awd.png" mode=""></image>
				<text class="cell-tit">使用卡券</text>
			</view>
			<view class="contents">
				<view class="left">
					刺梨卡
					<text class="immediately" @click="goPages()" v-if="trattStu ==2">立即激活</text>
				</view>
				<view class="right">
					<text v-if="trattStu ==1">已激活 可直接使用 </text>
					<view class="switch">
						<evan-switch :size="18" active-color="#FF1F2F" :disabled="trattStu !==1 || trattDisabled" @change="trattSwitch"></evan-switch>
					</view>
				</view>

			</view>

		</view>
		<!-- 优惠明细 -->
		<view class="yt-list">

			<!-- <view class="yt-list-cell b-b" @click="toggleMask('show')">
				<view class="cell-icon">
					券
				</view>
				<text class="cell-tit clamp">优惠券</text>
				<text class="cell-tip active" v-if="couponList.length > 0">
					选择优惠券
				</text>
				<text class="cell-tip" v-else>无可用优惠券</text>
				<text class="cell-more wanjia wanjia-gengduo-d"></text>
			</view> -->
			<view class="yt-list-cell-box" v-if="cartInfo[0].seller_info.goods_list[0].productInfo.is_user_shell == 1" v-for="(item,index) in shellList"
			 :key="index">
				<view class="yt-list-cell">
					<image :src="item.image" mode=""></image>
					<text class="cell-tit clamp" v-if="item.available_count != 0">可用{{item.name}}{{item.available_count}}</text>
					<text class="cell-tit clamp" v-else>无可用{{item.name}}</text>
					<evan-switch :size="18" active-color="#FF1F2F" :disabled="item.available_count == 0||item.disabled" v-model="item.checked"
					 @change="shellSwitch(item)"></evan-switch>
				</view>
				<view class="lebalBox" v-if="item.checked">
					<text class="lebal">使用{{item.shellDeduction}}，抵扣￥{{item.shellDeduction*item.rate}}</text>
					<text class="change" @tap="shellChange">修改</text>
				</view>
			</view>
			<uni-popup ref="shellChange" type="center">
				<view class="box">
					<image @tap="close" src="../../../static/images/center/close.png" mode=""></image>
					<view class="title">{{shellItem.name}}抵扣</view>
					<view class="content">
						<view class="label">
							<text>拥有{{shellItem.name}}</text>
							<text>{{shellItem.available_count}}</text>
						</view>
						<view class="inputBox">
							<text>使用{{shellItem.name}}</text>
							<text>个</text>
							<input type="digit" v-model="shellItem.shellDeduction" @input="shellChanged" />
						</view>
						<view class="inputBox">
							<text>可抵扣</text>
							<text>元</text>
							<input disabled="true" type="text" v-model="shellItem.shellDeduction" />
						</view>
						<view @tap="close" class="btn">确认</view>
					</view>
				</view>
			</uni-popup>
			<view class="yt-list-cell-box">
				<view class="yt-list-cell">
					<view class="cell-icon">
						￥
					</view>
					<text class="cell-tit clamp" v-if="yue">可用余额{{yue}}元</text>
					<text class="cell-tit clamp" v-else>无可用余额</text>
					<evan-switch :size="18" active-color="#FF1F2F" :disabled="userInfo.now_money == 0 || trattDisabledStu" v-model="yueChecked"
					 @change="priceC"></evan-switch>
				</view>
				<view class="lebalBox" v-if="yueChecked">
					<text class="lebal">使用￥{{yueDeduction}}，抵扣￥{{yueDeduction}}</text>
					<text class="change" @tap="yueChange()">修改</text>
				</view>
			</view>
			<uni-popup ref="yueChange" type="center">
				<view class="box">
					<image @tap="close" src="../../../mall/static/images/1address.png" mode=""></image>
					<view class="title">余额抵扣</view>
					<view class="content">
						<view class="label">
							<text>拥有余额</text>
							<text>{{userInfo.now_money}}</text>
						</view>
						<view class="inputBox">
							<text>使用余额</text>
							<text>元</text>
							<input type="digit" v-model="yueDeduction" @input="yueChanged" />
						</view>
						<view @tap="close" class="btn">确认</view>
					</view>
				</view>
			</uni-popup>
			<!-- <view class="yt-list-cell b-b">
				<view class="cell-icon hb">
					减
				</view>
				<text class="cell-tit clamp">商家促销</text>
				<text class="cell-tip disabled">暂无可用优惠</text>
			</view> -->
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品金额</text>
				<text class="cell-tip red">{{priceGroup.totalPrice}}</text>
			</view>
			<view class="yt-list-cell b-b" v-for="(item,index) in shellList" :key="index" v-if="item.shellDeduction != 0">
				<text class="cell-tit clamp">{{item.name}}抵扣</text>
				<text class="cell-tip">-￥{{item.shellDeduction}}</text>
			</view>
			<view class="yt-list-cell b-b" v-if="yueDeduction != 0">
				<text class="cell-tit clamp">余额抵扣</text>
				<text class="cell-tip">-￥{{yueDeduction}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费 (不可抵扣)</text>
				<text class="cell-tip ">+<text class="red">{{priceGroup.storePostage||'0.00'}}</text></text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">优惠</text>
				<text class="cell-tip ">－<text class="red">{{ablePrice}}</text></text>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<!-- app支付选择 -->
		<view class="yt-list">
			<view class="pay-box">
				<block v-for="(item,index) in providerList" :key="index">
					<view class="way" @tap="chooseWay(index)">
						<view class="left">
							<image :src="item.icon" mode=""></image>
							<text>{{item.name}}</text>
						</view>
						<view :class="index == indexWay?'active':''" class="right">

						</view>
					</view>
				</block>
			</view>
		</view>
		<!-- #endif -->
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>共 {{goodsNum}} 件,实付款</text>
				<text class="price-tip">￥</text>
				<!-- <text class="price">{{totalPrice}}</text> -->
				<text class="price">{{needPay.toFixed(2)}}</text>
			</view>
			<text class="submit" @click="clickSubmit">提交订单</text>
		</view>


		<!-- 优惠券面板 -->
		<!-- <view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content" @click.stop.prevent="stopPrevent">
				<block v-for="(item,index) in couponList" :key="index">
					<view class="coupon-item" @click="getCoupons(item)">
						<view class="con">
							<view class="left">
								<text class="title">{{item.coupon_title}}</text>
								<text v-if="item.end_time" class="time">有效期至{{item.end_time}}</text>
								<text v-else class="time">永久有效</text>
							</view>
							<view class="right">
								<text class="price">{{item.coupon_price}}</text>
								<text>满{{item.use_min_price}}可用</text>
							</view>
							<view class="circle l"></view>
							<view class="circle r"></view>
						</view>
						<text class="tips">限新用户使用</text>
					</view>
				</block>

			</view>
		</view> -->
		<!-- 抵扣全部金额输入平台操作密码 -->
		<passkeyborad class="passkeyborad" :show="keyboradShow" @close="keyboradClose" @finish="finished"></passkeyborad>

	</view>
</template>

<script>
	import {
		trattConfirm,
		trattCreate
	} from '../../../api/order.js'




	import {
		couponsList,
	} from '@/api/mall.js'
	import {
		checkPassword
	} from "@/api/user.js"
	import {
		shellList
	} from "@/api/shell.js"
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	import evanSwitch from "@/components/evan-switch/evan-switch.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import utils from "@/common/utils.js"
	import wechat from '@/common/wechat.js'
	export default {
		components: {
			evanSwitch,
			uniPopup,
			passkeyborad
		},
		data() {
			return {
				providerList: [],
				indexWay: 0,
				payType: "weixin",
				provider: "wxpay",
				shellItemChange: {
					checked: false,
					id: -1
				},
				shellItem: {
					shellDeduction: 0
				}, // 选中要修改的贝壳数据
				shellList: [{
						shellDeduction: 0
					},
					{
						shellDeduction: 0
					},
					{
						shellDeduction: 0
					},
					{
						shellDeduction: 0
					}
				], // 贝壳列表
				yueChecked: false, // 余额抵扣开关状态
				yue: 0, // 用户余额
				yueDeduction: 0, // 用户使用余额
				rate: 1, //黑贝壳兑换比率
				maskState: 0, //优惠券面板显示状态
				descList: [], //备注
				couponList: [],
				addressData: {
					real_name: '',
					phone: '',
					province: '',
					city: '',
					district: '',
					detail: '',
					default: 1,
					id: 0
				},
				couponsPage: 1,
				couponsLimit: 50,
				couponsList: [],
				cartInfo: [{ // 初始化 不能删,兼容app
					seller_info: {
						goods_list: [{
							productInfo: {
								attrInfo: {
									suk: ''
								}
							}
						}],
					}
				}],
				priceGroup: {},
				orderKey: '',
				couponId: 0, //领取优惠券id
				userInfo: {},
				keyboradShow: false,
				giftPrices: null, //赠品礼包价格
				trattStu: null, //刺梨卡状态 1 可直接使用 2 可激活  3没有
				trattDisabled: false, //刺梨卡是否可以兑换
				trattDisabledStu: false, //是否选择了刺梨卡兑换
				ablePrice: 0, //总共优惠价格
				confirmId:null,//当前的订单id
				messages:'',//留言
			}
		},
		onLoad(option) {
			if (uni.getStorageSync("available_alipay") == 0) {
				this.providerList = [{
					name: "微信支付",
					icon: "/static/images/public/weixin.png",
					payType: "weixin",
					provider: "wxpay"
				}]
			} else {
				this.providerList = [{
						name: "微信支付",
						icon: "/static/images/public/weixin.png",
						payType: "weixin",
						provider: "wxpay"
					},
					{
						name: "支付宝支付",
						icon: "/static/images/public/alipay.png",
						payType: "alipay",
						provider: "alipay"
					}
				]
			}


			uni.showLoading({
				mask: true
			})

			trattConfirm({
				cartId: option.cartId
			}).then(res => {
				uni.hideLoading()
				this.confirmId = option.cartId
				this.trattStu = res.data.cili_card_status
				res.data.addressInfo == null ? this.addressData.real_name = '请选择地址' : this.addressData = res.data.addressInfo
				this.addressData.phone = utils.hidden(this.addressData.phone, 3, 4)
				this.couponList = res.data.usableCoupon
				this.cartInfo = res.data.cartInfo
				this.priceGroup = res.data.priceGroup
				this.orderKey = res.data.orderKey
				this.userInfo = res.data.userInfo
				this.yue = Math.floor(Number(this.userInfo.now_money) * 100) / 100
				let _this = this
				this.cartInfo.forEach((item, index) => {
					_this.descList.push({
						seller_id: item.seller_info.seller_id,
						desc: ''
					})
				})
			}).catch(err => {
				console.log(err, 3331110)
			})
			shellList().then(res => {
				this.shellList = res.data.shell_list.map((val, key) => {
					val.checked = false
					val.shellDeduction = 0
					val.disabled = false
					return val
				});
			})
		},
		watch: {
			yueChecked: {
				deep: true,
				handler(val, oldval) {
					this.yueCheckeChange();
				}
			},
			shellItemChange: {
				deep: true,
				handler(val, oldval) {
					this.shellCheckeChange();
				}
			}
		},
		computed: {
			needPay() {
				let needPay = 0
				if (this.trattDisabledStu) {
					needPay = Number(this.priceGroup.storePostage)
				} else {
					console.log(this.priceGroup, this.shellItem, 9999990000)
					needPay = Number(this.priceGroup.totalPrice) + Number(this.priceGroup.storePostage) - (Number(this.yueDeduction) +
						Number(this.shellItem.shellDeduction))
				}
				return needPay
			},
			goodsNum() {
				let goodsNum = 0
				this.cartInfo.forEach(items => {
					items.seller_info.goods_list.forEach(item => {
						goodsNum = goodsNum + item.cart_num
					})
				})
				return goodsNum
			}
		},
		methods: {
			// 点击余额
			priceC(e) {
				this.trattDisabled = e
			},
			// 计算赠送礼包的规格和价格
			gifts(item) {
				let str = ''
				if (item) {
					item.attr_value.forEach(it => {
						if (it) {
							str += (it.suk + '，')
						}
					})
				}
				return str
			},
			// 优惠总价
			getAllPrice(item) {
				let str = 0
				if (item) {
					item.forEach(items => {
						if (items.productInfo.send_k1vip && !items.productInfo.send_travel_card) {
							str += Number(19.9)
						} else if (!items.productInfo.send_k1vip && items.productInfo.send_travel_card) {
							str += Number(168)
						} else {
							str += (Number(168) + Number(19.9))
						}
						if (items.productInfo.cili_gift_bag) {
							console.log(items.productInfo.cili_gift_bag, 4422)
							let arr = JSON.parse(JSON.stringify(items.productInfo.cili_gift_bag))
							arr.pop()
							arr.forEach(it => {
								str += Number(it.price)
							})
							this.ablePrice = str.toFixed(2)
						}


					})
				}
				console.log(str, 2222)

				// if(item.store_name){
				// 	console.log(item,33)
				// 	if(item.send_k1vip){
				// 		this.giftPrices += Number(19.9) 
				// 		console.log(item,111)
				// 	}else if(item.send_travel_card){
				// 		this.giftPrices += Number(168)
				// 		console.log(item,222)
				// 	}
				// }

			},
			// 点击激活
			goPages() {
				uni.setStorageSync("confirmId", this.confirmId)
				uni.navigateTo({
					url: "/pages/center/ticket/ticket?tratt=1"
				})
			},
			message(e, index) {
				this.descList[index].desc = e.target.value
			},
			chooseWay(index) {
				this.indexWay = index
				this.payType = this.providerList[index].payType
				this.provider = this.providerList[index].provider
			},
			getCoupons(item) {
				this.couponId = item.id;
				// 				couponsList({
				// 					page: this.couponsPage,
				// 					limit: this.couponsLimit
				// 				}).then(res => {
				// 					this.couponList = res.data;
				// 				})
			},
			// 使用刺梨卡兑换
			trattSwitch(e) {
				this.trattDisabledStu = e
				this.shellList.forEach(item => {
					if (e) {
						item.disabled = true
					} else {
						item.disabled = false
					}
				})

			},
			shellSwitch(item) {
				this.shellItem = item
				this.shellItemChange.checked = item.checked
				this.shellItemChange.id = item.id
				let _this = this
				if (item.checked) {
					_this.shellList.forEach((items, index) => {
						if (item.id !== items.id) {
							_this.shellList[index].disabled = true
						}
					})
				} else {
					_this.shellList.forEach((items, index) => {
						_this.shellList[index].disabled = false
					})
				}
				this.trattDisabled = this.shellList.some(function(item) {
					return item.checked;
				})

			},
			// 打开修改贝壳抵扣面板
			shellChange() {
				this.$refs.shellChange.open()
			},
			shellChanged() {
				let _this = this
				this.$nextTick(function() {
					this.shellItem.shellDeduction = utils.verifyNum(this.shellItem.shellDeduction)
				})
				let totalPrice = Number(this.priceGroup.totalPrice)
				if (Number((totalPrice - this.yueDeduction).toFixed(2)) > Number(this.shellItem.available_count)) {
					if (Number(this.shellItem.shellDeduction) > Number(this.shellItem.available_count)) {
						this.$nextTick(function() {
							uni.showToast({
								icon: "none",
								title: "不能超过可用贝壳数"
							})
							this.shellItem.shellDeduction = Number(this.shellItem.available_count)
						})
					}
				} else {
					if (Number(this.shellItem.shellDeduction) > Number((totalPrice - this.yueDeduction).toFixed(2))) {
						this.$nextTick(function() {
							uni.showToast({
								icon: "none",
								title: "不能超过需支付金额"
							})
							this.shellItem.shellDeduction = Number((totalPrice - this.yueDeduction).toFixed(2))
						})
					}
				}
			},
			//改变贝壳抵扣开关
			shellCheckeChange() {
				let _this = this
				let totalPrice = Number(this.priceGroup.totalPrice)
				if (this.shellItem.checked) {
					if (Number(this.shellItem.available_count) > Number((totalPrice - this.yueDeduction).toFixed(2))) {
						this.shellItem.shellDeduction = Number((totalPrice - this.yueDeduction).toFixed(2))
					} else {
						this.shellItem.shellDeduction = Number(this.shellItem.available_count)
					}

				} else {
					this.shellItem.shellDeduction = 0
				}
			},
			// 打开修改余额抵扣面板
			yueChange() {
				this.$refs.yueChange.open()
			},
			// 修改抵扣余额
			yueChanged() {
				let _this = this
				this.$nextTick(function() {
					this.yueDeduction = utils.verifyNum(this.yueDeduction)
				})
				let totalPrice = Number(this.priceGroup.totalPrice)
				if (totalPrice - this.shellItem.shellDeduction > Number(this.userInfo.now_money)) {
					if (Number(this.yueDeduction) > Number(this.userInfo.now_money)) {
						this.$nextTick(function() {
							uni.showToast({
								icon: "none",
								title: "不能超过可用余额"
							})
							this.yueDeduction = Number(this.userInfo.now_money)
						})
					}
				} else {
					if (Number(this.yueDeduction) > Number((totalPrice - this.shellItem.shellDeduction).toFixed(2))) {
						this.$nextTick(function() {
							uni.showToast({
								icon: "none",
								title: "不能超过需支付金额"
							})
							this.yueDeduction = Number((totalPrice - this.shellItem.shellDeduction).toFixed(2))
						})
					}
				}
			},
			//改变余额抵扣开关
			yueCheckeChange() {
				let totalPrice = Number(this.priceGroup.totalPrice)
				if (this.yueChecked) {
					if (Number(this.userInfo.now_money) > Number((totalPrice - this.shellItem.shellDeduction).toFixed(2))) {
						this.yueDeduction = Number((totalPrice - this.shellItem.shellDeduction).toFixed(2))
					} else {
						this.yueDeduction = Number(this.userInfo.now_money)
					}
				} else {
					this.yueDeduction = 0
				}
			},
			close() {
				this.$refs.shellChange.close()
				this.$refs.yueChange.close()
			},
			//显示优惠券面板
			toggleMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer)
			},
			clickSubmit() {
				if (this.needPay <= 0) {
					if (!uni.getStorageSync("userInfo").withdraw_pass) {
						uni.showModal({
							content: "0元支付需设置操作密码",
							confirmText: "去设置",
							cancelText: "取消",
							confirmColor: "#57BE6A",
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/center/accountSet/payPassword/payPassword?backurl=true"
									})
								} else if (res.cancel) {}

							}
						})
						return
					}
					this.keyboradShow = true
				} else {
					this.submit()
					uni.showLoading({
						mask: true
					})
				}
			},
			submit() {
				let data = {
					addressId: this.addressData.id,
					// couponId: this.couponId,
					// #ifdef MP-WEIXIN
					from: "routine",
					// #endif
					// #ifdef APP-PLUS
					from: "app",
					// #endif
					// #ifdef H5
					from: "weixin",
					// #endif
					now_money: this.yueDeduction, //使用金额
					payType: this.payType, //支付方式
					use_black_conch: Number(this.shellList[0].shellDeduction), //黑贝壳
					use_yellow_conch: Number(this.shellList[1].shellDeduction),
					use_red_conch: Number(this.shellList[2].shellDeduction),
					use_blue_conch: Number(this.shellList[3].shellDeduction),
					mark: this.messages, //备注
					use_conch: Number(this.shellList[0].shellDeduction) + Number(this.shellList[1].shellDeduction) + Number(this.shellList[
						2].shellDeduction) + Number(this.shellList[3].shellDeduction), //贝壳抵扣数量
					use_cili: this.trattDisabledStu ? '1' : '0'
				}
				trattCreate(this.orderKey, data).then(res => {
					
					console.log(res.data)
					uni.hideLoading()
					if (res.data.status == "SUCCESS") {
						uni.showToast({
							title: "支付成功"
						})
						setTimeout(function() {
							uni.redirectTo({
								url: `/mall/order/order?state=0&buy=${true}`
							})
						}, 300);
					} else if (res.data.status == "WECHAT_PAY" || res.data.status == "ALIPAY") {
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.result.jsConfig.timestamp,
							nonceStr: res.data.result.jsConfig.nonceStr,
							package: res.data.result.jsConfig.package,
							signType: res.data.result.jsConfig.signType,
							paySign: res.data.result.jsConfig.paySign,
							complete: function(re) {
								uni.redirectTo({
									url: `/mall/order/order?state=0&buy=${true}`
								})
							}
						});
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: this.provider,
							orderInfo: res.data.result.jsConfig,
							complete: (e) => {
								uni.redirectTo({
									url: `/mall/order/order?state=0&buy=${true}`
								})
							}
						})
						// #endif
						//#ifdef H5
						// h5支付
						let url = "/mall/order/order?state=0&buy=true"
						wechat.pay(res.data.result.jsConfig, url, true)
						//#endif
					}
				})
			},
			finished(password) {
				uni.showLoading({
					mask: true
				})
				checkPassword({
					password: password
				}, this.keyboradClose()).then(res => {
					this.submit()
				})
			},
			keyboradClose() {
				this.keyboradShow = false
			},
			stopPrevent() {}
		}
	}
</script>

<style lang="scss">
	page {
		background: #eee;
		padding-bottom: 110rpx;
		padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
	}

	.address-section {
		margin-top: 16rpx;
		padding: 30rpx;
		background: #fff;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28rpx;
			color: #303133;
		}

		.name {
			font-size: 26rpx;
			margin-right: 24rpx;
			font-weight: bold;
		}

		.mobile {
			font-size: 26rpx;
			font-weight: bold;
		}

		.address {
			margin-top: 16rpx;
			margin-right: 20rpx;
			color: #909399;
		}
	}

	.goods-section {
		margin-top: 16rpx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 84rpx;
			padding: 0 30rpx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50rpx;
			height: 50rpx;
			border-radius: 100px;
		}

		.name {
			font-size: 30rpx;
			color: #606266;
			margin-left: 24rpx;
		}

		.g-item {
			display: flex;
			margin: 20rpx 30rpx;

			image {
				flex-shrink: 0;
				width: 140rpx;
				height: 140rpx;
				border-radius: 4rpx;
			}

			.right {
				flex: 1;
				padding-left: 24rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.title {
				font-size: 30rpx;
				color: #303133;
			}

			.specBox {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;

				.spec {
					flex: 1;
				}

				.number {}
			}

			.price {
				display: block;
				text-align: right;
				font-size: 28rpx;
				font-weight: bold;
				color: $mall-price;

				&:before {
					content: '￥';
					font-size: 18rpx;
					margin-right: 4rpx;
				}
			}
		}
	}

	.rosa {
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		margin: 20rpx 0;
		background-color: #FFFFFF;

		.title {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			color: #333333;
			font-size: 28rpx;

			image {
				width: 28rpx;
				height: 23rpx;
				margin-right: 12rpx;

			}

		}

		.contents {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			.immediately {
				color: #FF1D2D;
				margin-left: 20rpx;
				font-size: 24rpx;
			}

			.left {
				margin-left: 40rpx;
				color: #333333;
				font-size: 28rpx;
				flex: 1;
			}

			.right {
				flex: 1;
				color: #AAAAAA;
				font-size: 24rpx;
				display: flex;
				justify-content: flex-end;

				.switch {
					width: 36px;
					margin-left: 15rpx;
				}
			}
		}
	}

	.yt-list {
		margin-top: 16rpx;
		background: #fff;


		.pay-box {

			.way {
				padding: 10rpx 30rpx 10rpx 40rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				width: 100%;
				box-sizing: border-box;
				border-bottom: 1rpx solid #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}

				.right {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					box-sizing: border-box;
					border: 10rpx solid #fff;
					box-shadow: 0 0 0 4rpx #f5f5f5;
				}

				.active {
					background-color: $mall-price;
					box-shadow: 0 0 0 4rpx rgba(255, 0, 0, 1);
				}
			}
		}
	}

	.yt-list-cell-box {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		.lebalBox {
			padding: 30rpx 40rpx;
			line-height: 20rpx;
			display: flex;
			justify-content: space-between;

			.lebal {
				font-size: 20rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}

			.change {
				font-size: 16rpx;
				color: rgba(51, 51, 51, 1);
				width: 59rpx;
				height: 24rpx;
				line-height: 20rpx;
				border-radius: 10rpx;
				text-align: center;
				background-color: #e5e5e5;
			}
		}

	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10rpx 30rpx 10rpx 40rpx;
		line-height: 70rpx;
		position: relative;

		&.b-b:after {
			left: 30rpx;
		}

		image {
			height: 24rpx;
			width: 33rpx;
			margin-right: 12rpx;
		}

		.cell-icon {
			height: 32rpx;
			width: 32rpx;
			border-radius: 16rpx;
			font-size: 22rpx;
			color: #fff;
			text-align: center;
			line-height: 32rpx;
			background: $mall-price;
			margin-right: 12rpx;
			font-weight: bold;

		}

		.cell-more {
			align-self: center;
			font-size: 24rpx;
			color: #909399;
			margin-left: 8rpx;
			margin-right: -10rpx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26rpx;
			color: #333;
			margin-right: 10rpx;
		}

		.cell-tip {
			font-size: 26rpx;
			color: #333;
			font-weight: bold;
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90rpx;
			}
		}

		.desc {
			flex: 1;
			font-size: 28rpx;
			color: #303133;
		}

		.red {
			color: $mall-price;

			&:before {
				content: '￥';
				font-size: 20rpx;
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 110rpx;
		justify-content: space-between;
		font-size: 26rpx;
		background-color: #fff;
		z-index: 998;
		color: #333;
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 0px 5px rgba(0, 0, 0, .05);

		.price-content {
			padding-left: 30rpx;
		}

		.price-tip {
			color: $mall-price;
			margin-left: 8rpx;
			font-weight: bold;
		}

		.price {
			font-size: 34rpx;
			color: $mall-price;
			font-weight: bold;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 24rpx;
			background-color: $mall-price;
			width: 160rpx;
			height: 70rpx;
			background: $mall-price;
			border-radius: 35rpx;
			margin-right: 30rpx;
		}
	}

	/* 优惠券面板 */
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;

		.mask-content {
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y: scroll;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20rpx 24rpx;
		background: #fff;

		.con {
			display: flex;
			align-items: center;
			position: relative;
			height: 120rpx;
			padding: 0 30rpx;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100rpx;
		}

		.title {
			font-size: 32rpx;
			color: #303133;
			margin-bottom: 10rpx;
		}

		.time {
			font-size: 24rpx;
			color: #909399;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			color: #606266;
			height: 100rpx;
		}

		.price {
			font-size: 44rpx;
			color: #fa436a;

			&:before {
				content: '￥';
				font-size: 34rpx;
			}
		}

		.tips {
			font-size: 24rpx;
			color: #909399;
			line-height: 60rpx;
			padding-left: 30rpx;
		}

		.circle {
			position: absolute;
			left: -6rpx;
			bottom: -10rpx;
			z-index: 10;
			width: 20rpx;
			height: 20rpx;
			background: #f3f3f3;
			border-radius: 100px;

			&.r {
				left: auto;
				right: -6rpx;
			}
		}
	}

	.box {
		background-color: #fff;
		position: relative;
		width: 600rpx;
		padding: 36rpx;
		box-sizing: border-box;
		border-radius: 10rpx;

		image {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			width: 26rpx;
			height: 26rpx;
		}

		.title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
		}

		.content {
			.label {
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				color: #333;
				margin-top: 46rpx;
				align-items: center;

				text:nth-of-type(2) {
					margin-left: 8rpx;
					font-weight: bold;
				}
			}

			.inputBox {
				position: relative;
				height: 114rpx;
				line-height: 114rpx;
				border-bottom: 1rpx solid #eee;

				text:nth-of-type(1) {
					font-size: 28rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				text:nth-of-type(2) {
					font-size: 28rpx;
					position: absolute;
					top: 0;
					right: 0;
				}

				input {
					height: 114rpx;
					text-align: right;
					padding-right: 58rpx;
					font-size: 56rpx;
				}
			}

			.btn {
				margin: 40rpx 0 0;
				width: 528rpx;
				height: 80rpx;
				background: $mall-price;
				border-radius: 40rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
			}
		}

		.passkeyborad {
			position: relative;
			z-index: 99;
		}

	}
</style>
